<template>
    <div class="u-p-20">
        <el-form :inline="true" size="small">
            <el-form-item label="时间筛选">
                <el-date-picker
                        type="daterange"
                        v-model="dtrange"
                        align="left"
                        unlink-panels
                        range-separator="至"
                        start-placeholder="开始日期"
                        end-placeholder="结束日期"
                        value-format="yyyy-MM-dd"
                        :picker-options="pickerOptions"
                        @change="handleDt">
                </el-date-picker>
            </el-form-item>
        </el-form>

        <div class="u-mt-30">
            <div class="common-title">
                <div class="line"></div>
                <div class="txt">关键指标详解</div>
            </div>
            <el-tabs v-model="activeTab" type="card" class="u-mt-20">
                <el-tab-pane label="地域分布" name="area">
                    <div id="chart-area"></div>
                </el-tab-pane>
            </el-tabs>
        </div>

        <div class="u-mt-45">
            <div class="common-title">
                <div class="line"></div>
                <div class="txt">详细数据</div>
            </div>
            <el-table :data="chartData" class="u-mt-20" border>
                <el-table-column label="省市" prop="area_name"></el-table-column>
                <el-table-column label="访问次数" prop="pv"></el-table-column>
                <el-table-column label="访问人数" prop="uv"></el-table-column>
                <el-table-column label="打开次数" prop="vv"></el-table-column>
                <el-table-column label="独立IP数" prop="iv"></el-table-column>
            </el-table>
        </div>
    </div>
</template>

<script>
    import {isEmpty} from '@/libs/util'
    import analysisUser from '@/mixins/analysis-user'
    import G2 from '@antv/g2'

    export default {
        name:'UserArea',
        mixins:[analysisUser],
        data() {
            return {
                apiName:'userArea',
                activeTab:'area',
                chart_area:null,
                queryForm:{
                    start_time:'',
                    end_time:''
                }
            }
        },
        methods: {
            initChart(){
                this.chart_area = new G2.Chart({
                    container: 'chart-area',
                    forceFit: true,
                    height: 360,
                    padding: [60, 60, 40, 60]
                })
                let sourceConfig = '{"pv":{"min":0, "type":"linear","tickCount":5, "nice": true, "alias": "访问次数"}}'
                this.chart_area.source(this.chartData,JSON.parse(sourceConfig))
                this.chart_area.axis('area_name', {
                    label:{
                        offset:20
                    }
                })
                this.chart_area.legend('area_name',{
                    position: 'top-center',
                    offsetY: -20
                })
                this.chart_area.interval().position('area_name*pv').color('area_name')
                this.chart_area.render()
            },
            afterGetData(){
                this.setChart()
            },
            setChart(){
                if(!isEmpty(this.chart_area)){
                    this.chart_area.destroy()
                }
                switch (this.activeTab) {
                    case 'area':{
                        this.initChart()
                        break;
                    }
                }
            }
        },
        watch: {
            activeTab() {
                this.$nextTick(()=>{
                    this.setChart()
                })
            }
        }
    }
</script>